<!--  -->
<template>
    <Modal title="采购详情"  @on-visible-change="change" :zhmodel="zhmodel" v-model="model" :width="width" class="zh-modal-form no_footer_modal" >
        <!-- <p slot="header" >采购详情</p> -->
        <div style="paddingBottom:15px">
            <div class="detail-other zh-flex zh-flex-3" >
                <div v-for="(item,index) in infor" :key="index" class="detail-other-item">
                    <label>{{item.label}}：</label>{{item.value}}
                </div>
            </div>
            <p class="out-table-title" >{{tableTitle}}</p>
            <Table border :columns="columns" :data="data"></Table>
            <Table border :show-header="false" :columns="totalcolumns" :data="totallist"></Table>
            <Table  :show-header="false" :columns="remarkscolumns" :data="remarkslist"></Table>
            <Button v-if="!!imgsrc" @click="lookVoucher" class="zh-hollow" type="primary" icon="eye" style="margin:15px 0 5px 30px;">查看收货凭证</Button>
            <template v-if="!!evaluate&&!!evaluate.skill">
                <p class="out-table-title" >评价</p>
                <div  class="detail-other zh-flex zh-flex-3" >
                    <div class="detail-other-item"><label>专业技能：</label>{{evaluate.skill}}</div>
                    <div class="detail-other-item"><label>响应速度：</label>{{evaluate.speed}}</div>
                    <div class="detail-other-item"><label>服务态度：</label>{{evaluate.service}}</div>
                    <!-- <div class="detail-other-item"><label>其他评价：</label>{{evaluate.other}}</div> -->
                </div>
                <div  class="detail-other zh-flex zh-flex-3" >
                    <div class="detail-other-item" style="width:100%"><label>其他评价：</label>{{evaluate.other}}</div>
                </div>
            </template>
        </div>
    </Modal>
</template>

<script>
export default {
    name:'detailModalF',
    data () {
        return {
            model:false,
        };
    },
    props:{
        width:{
            type:String|Number,
            dafault:1001
        },
        zhmodel:{
            type:Boolean,
            default:false
        },
        infor:{
            type:Array,
            default:[]
        },
        columns:{
            type:Array,
            default:[]
        },
        totalcolumns:{
            type:Array,
            default:[]
        },
        remarkscolumns:{
            type:Array,
            default:[]
        },
        data:{
            type:Array,
            default:[]
        },
        totallist:{
            type:Array,
            default:[]
        },
        remarkslist:{
            type:Array,
            default:[]
        },
        tableTitle:{
            type:String,
            default:'清单'
        },
        imgsrc:{
            type:String,
            default:''
        },
        evaluate:{
            type:Object,
            default:{
                skill:'',
                speed:'',
                service:'',
                other:''
            }
        }

    },
    methods:{
        change(active){
            this.$emit('change',active)
        },
        lookVoucher(){
            this.$emit('clickVoucher')
        }
    },
    watch:{
        zhmodel(){
            this.model=this.zhmodel
        }
    }
}

</script>
<style lang='scss' >
</style>